<template>
	<view>
		<view class="all" v-if="appraise.length > 0" v-for="(item,index) in appraiseitem" :key="index">
			<view class="header">
				<view class="tiem">
					<text style="font-size: 24px;">{{yearIastIenght}}</text><text
						style="font-size: 15px;">/{{Month}}月/{{year}}年</text>
				</view>
				<view class="user" v-if="!item.anonymity">
					<text>{{userinfo.nickName}}</text>
					<image :src="userinfo.avatarUrl" mode="aspectFit"></image>
				</view>
				<view class="user" v-else>
					<image style="width: 20px;margin-right: 10rpx;" src="../../static/隐藏.png" mode="aspectFit"></image>
					<text style="color: #bfbfbf;">匿名</text>

				</view>
			</view>
			<view class="middle" @click="goto(item)">
				<view class="good-pic">
					<image :src="item.goodItem.goods_small_logo" mode="aspectFit"></image>
				</view>
				<view class="good-text">
					{{item.goodItem.goods_name}}
				</view>
			</view>
			<view class="evlas">
				<text class="evlas-1">评价：</text>
				<text class="evlas-2">{{item.eval}}</text>
				<view class="evlas-3">
					<view class="evlas-4" v-for="(imgItem,indexSrc) in item.src" :key="indexSrc" @click="preview(item.src)">
						<muqian-lazyLoad mode="aspectFit" :src="imgItem" style="padding-right: 15px;margin-bottom: 10px;"
							width="125rpx" height="125rpx"></muqian-lazyLoad>
						<!-- <image  mode="aspectFit" src="#"></image> -->
					</view>
				</view>
			</view>
			<view class="foodter">
				<view class="good-eval">
					<view>浏览 1</view>
					<view>评论 0</view>
					<view>点赞 0</view>
				</view>
				<view class="good-bnt"></view>
			</view>
			<view class="" style="width: 100%;height: 10px;background-color: #f1f3f4;margin-top: 15px;"></view>
		</view>

		<myEmpty v-if="appraise.length == 0" mode="comment" :windowHeight="50"></myEmpty>

	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from "vuex"
	export default {
		data() {
			return {
				year: void 0,
				Month: void 0,
				Day: void 0,
				yearIastIenght: void 0,
				appraiseitem: [],
			};
		},
		computed: {
			...mapState("rechargeComments", ["appraise"]),
			...mapState("login", ["userinfo"])
		},
		onLoad() {
			uni.$setNavigationBarColor()
			//时间
			this.appraiseitem = this.appraise
			let data = new Date()
			this.year = String(data.getFullYear())
			this.yearIastIenght = this.year.substr(this.year.length - 2, this.year.length)
			this.Month = data.getMonth()
			this.Day = data.getDay()

		},
		methods: {
			//跳转
			goto(item) {
				uni.redirectTo({
					url: "/subGoodsDetail/goods_detail/goods_detail?goods_id=" + item.goodItem.goods_id
				})
			},
			//预览图片
			preview(item) {
				uni.previewImage({
					current: item[0], // 当前显示图片的http链接
					urls: item // 需要预览的图片http链接列表
				})
			},
		},
	}
</script>

<style lang="scss">
	.all {
		padding: 10px 15px;

		.evlas {
			padding-bottom: 10px;

			.evlas-1 {
				color: #eb783c;
				font-size: 17px;
			}

			.evlas-2 {
				font-size: 13px;
			}

			.evlas-3 {
				display: flex;
				flex-wrap: wrap;
				margin-top: 10px;
				margin-left: 70rpx;

				image {
					padding-right: 10rpx;
					margin-bottom: 10px;
					width: 70px;
					height: 70px;
				}
			}
		}

		.header {

			display: flex;
			justify-content: space-between;
			align-items: center;

			.user {
				display: flex;
				align-items: center;

				text {
					font-size: 14px;
				}

				image {
					width: 30px;
					height: 30px;
					border-radius: 50%;
				}
			}
		}

		.middle {
			display: flex;
			margin: 15px 0 10px 0;
			// margin-top: 15px;
			// margin-bottom: 10px;

			.good-pic {
				image {
					width: 50px;
					height: 50px;
				}
			}

			.good-text {
				line-height: 40px;
				/*1. 先强制一行内显示文本*/
				white-space: nowrap;
				/*2. 超出的部分隐藏*/
				overflow: hidden;
				/*3. 文字用省略号替代超出的部分*/
				text-overflow: ellipsis;
				font-size: 13px;
				margin-left: 10px;

			}
		}

		.foodter {
			font-size: 12px;
			color: #aeaeae;

			.good-eval {
				display: flex;

				view {
					display: block;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>